import React from './react';
import ReactDom from './react-dom';

class ClassComp extends React.PureComponent {
  constructor(proos) {
    super(proos);
    this.state = {
      show: true,
    };
  }

  toggle = () => this.setState({ show: !this.state.show });

  render() {
    console.log('parent render!!');
    return (
      <div>
        {this.state.show ? (
          <ul onClick={this.toggle}>
            <li key="A">A</li>
            <li key="B">B</li>
            <li key="C">C</li>
            <li key="D">D</li>
          </ul>
        ) : (
          <ul>
            <li key="A">A</li>
            <li key="C">C</li>
            <li key="B">B</li>
            <li key="E">E</li>
            <li key="F">F</li>
          </ul>
        )}
      </div>
    );
  }
}

ReactDom.render(<ClassComp />, document.getElementById('root2'));
